<template>
  <el-row>
    <el-col :span="4">
      <el-form ref="form"
               :rules="rules"
               :model="otherForm"
               label-width="80px">
        <el-form-item label="最低费用"
                      prop="minimumFee">
          <el-input v-model="otherForm.minimumFee"
                    :disabled="!valueObject || disabled"
                    @input="otherInput">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="保险费"
                      prop="insuranceRate">
          <el-input v-model="otherForm.insuranceRate"
                    :disabled="!valueObject || disabled"
                    @input="otherInput">
            <span slot="suffix">‰</span>
          </el-input>
        </el-form-item>
        <el-form-item label="税率"
                      prop="taxRate">
          <el-input v-model="otherForm.taxRate"
                    :disabled="!valueObject || disabled"
                    @input="otherInput">
            <span slot="suffix">%</span>
          </el-input>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'OtherComponent',
  props: {
    specs: {
      type: Object,
      default: () => { }
    },
    valueObject: {
      type: Boolean,
      default: null
    },
    importStatus: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      otherForm: {
        minimumFee: '',
        insuranceRate: '',
        taxRate: ''
      },
      rules: {
        // minimumFee: [{ message: '请输入最低费用' }, {
        //   pattern: /^(\d{0,7})(\.(\d{0,2}))?$/g,
        //   message: "只能输入7位整数，2位小数",
        //   trigger: ['change', 'blur']
        // }],
        // insuranceRate: [{ validator: validateInsuranceRate, trigger: ['change', 'blur'] }
        // ],
        // taxRate: [{ validator: validateTaxRate, trigger: ['change', 'blur'] }]
      }
    }
  },
  computed: {
    ...mapState({
      other: (state) => state.quotation.other
    }),
    query () {
      return this.$route.query
    },
    detail () {
      // return this.specs?.detailData
      return this.specs?.other
    },
    disabled () {
      return Number(this.initStatus) === 8
    },
    // showDelete () {
    //   return this.detail?.status ? true : false
    // },
    initStatus () {
      return this.query.status || this.query.templateId
    },
    addRule () {
      return (prop, rule) => {
        this.$set(this.rules, prop, rule)
      }
    },
    validateInsuranceRate () {
      return (rule, value, callback) => {
        let pattern = /^\d+.?\d{0,2}$/;
        if (!value) {
          return callback(new Error('请输入保险率'))
        }
        setTimeout(() => {
          if (Number(value) > 1000) {
            return callback(new Error('保险率最大值1000'))
          } else if (!pattern.test(value)) {
            return callback(new Error('只能输入整数带两位小数'))
          }
          else {
            callback()
          }
        }, 100)
      }
    },
    validateTaxRate () {
      return (rule, value, callback) => {
        let pattern = /^\d+.?\d{0,2}$/;
        if (!value) {
          return callback(new Error('请输入税率'))
        }
        setTimeout(() => {
          if (Number(value) > 100) {
            return callback(new Error('税率最大值100'))
          } else if (!pattern.test(value)) {
            return callback(new Error('只能输入整数带两位小数'))
          }
          else {
            callback()
          }
        }, 100)
      }
    }
  },
  watch: {
    otherForm: {
      immediate: true,
      deep: true,
      handler (value) {
        if (value.minimumFee) {
          this.addRule('minimumFee', [{ required: true, message: '请输入最低费用' }, {
            pattern: /^(\d{0,7})(\.(\d{0,2}))?$/g,
            message: "只能输入7位整数，2位小数",
            trigger: ['change', 'blur']
          }])
        }
        if (value.insuranceRate) {
          this.addRule('insuranceRate', [{ validator: this.validateInsuranceRate, trigger: ['change', 'blur'] }])
        }
        if (value.taxRate) {
          this.addRule('taxRate', [{ validator: this.validateTaxRate, trigger: ['change', 'blur'] }])
        }
      }
    }
  },
  created () {
    if (this.initStatus || this.importStatus) {
      this.$set(this.otherForm, 'minimumFee', this.detail.minimumFee)
      this.$set(this.otherForm, 'insuranceRate', this.detail.insuranceRate)
      this.$set(this.otherForm, 'taxRate', this.detail.taxRate)
    } else {
      this.otherForm = {}
    }
  },
  methods: {
    // addRule (prop, rule) {
    //   this.$set(this.rules, prop, rule)
    // },
    otherInput () {
      const form = JSON.parse(JSON.stringify(this.otherForm))
      this.$store.commit('quotation/OTHER', form)
    }
  }
}
</script>

<style>
</style>